import styles from './Register.module.scss';
import { Space, Typography, Form, Input, Button, Checkbox } from 'antd';
import { UserAddOutlined } from '@ant-design/icons';
import { Link } from 'react-router-dom';
import { REGISTER } from '../router';
import { useEffect } from 'react';
const Register = () => {
	const { Title } = Typography;
	const [form] = Form.useForm();
	useEffect(() => {
		const username = localStorage.getItem('username') || '';
		const password = localStorage.getItem('password') || '';
		form.setFieldsValue({ username, password });
	});
	const onFinish = values => {
		if (values.remember) {
			// 记住我
			console.log('记住我');

			localStorage.setItem('username', values.username);
			localStorage.setItem('password', values.password);
		} else {
			localStorage.removeItem('username');
			localStorage.removeItem('password');
		}
		console.log(values);
	};
	return (
		<div className={styles.container}>
			<div>
				<Space>
					<Title level={3}>
						<UserAddOutlined />
					</Title>
					<Title level={3}>欢迎登录</Title>
				</Space>
				<div>
					<Form
						form={form}
						labelCol={{ span: 8 }}
						wrapperCol={{ span: 16 }}
						style={{ maxWidth: 600 }}
						initialValues={{ remember: true }}
						onFinish={onFinish}
					>
						<Form.Item
							label="用户名"
							name="username"
							rules={[
								{ required: true, message: 'Please input your username!' },
								{ type: 'string', min: 5, max: 20, message: '请注意长度' },
							]}
						>
							<Input />
						</Form.Item>
						<Form.Item
							label="密码"
							name="password"
							rules={[
								{ required: true, message: 'Please input your password!' },
								{
									type: 'string',
									min: 5,
									max: 20,
									message: '请注意长度',
								},
							]}
						>
							<Input.Password />
						</Form.Item>
						<Form.Item name="remember" valuePropName="checked">
							<Checkbox>记住我</Checkbox>
						</Form.Item>
						<Form.Item>
							<Space>
								<Button type="primary" htmlType="submit">
									提交
								</Button>
								<Link to={REGISTER}>去注册</Link>
							</Space>
						</Form.Item>
					</Form>
				</div>
			</div>
		</div>
	);
};

export default Register;
